import { Image } from 'antd';
import { HTMLDecode, replaceContent, replaceImageUrl } from '@/utils';
// css
import styles from '@/styles/CommonDetail.module.scss';

export default function DetailRoute({ data }) {

    data = JSON.parse(HTMLDecode(data[0].value));

    const { sNote, posters, dayList } = data;

    function routesIconMap(type) {
        switch (+type) {
            case 1: return 'meishi';
            case 2: return 'jiaotong';
            case 3: return 'jingdian';
            case 4: return 'jiudian';
            case 5: return 'tiyan';
            case 6: return 'qita';
        }
    }

    return (
        <div className={styles['route-box']}>
            <div className={styles['route-poster']}>
                {
                    posters.map((item, index) => <img src={replaceImageUrl(item.url)} key={index} alt="" />)
                }
            </div>
            <h2>{sNote}</h2>
            <div className={styles["route-tips"]}>
                <span className="iconfont icon-tishishuoming"></span> 以下行程时间均为当地时间
            </div>
            {
                dayList.map((dayItem, index) => {
                    const { itemList, topic, summary } = dayItem
                    return (
                        <div className={styles['route-item']} key={index}>
                            <div className={styles['route-item-line']}></div>
                            <h3 className={styles['route-item-title']}>
                                <span className={styles['day']}>{topic}</span>
                                <span className={styles['title']}>{summary}</span>
                            </h3>
                            <div className={styles["route-item-cnt"]}>
                                {
                                    itemList.map((routeItem, index1) => {
                                        const { imgs, notice, type, title, con } = routeItem
                                        return (
                                            <div className={styles["item"]} key={index1}>
                                                <h4 className={[styles["title"], styles[routesIconMap(type)]].join(' ')}>{title}</h4>
                                                <div className={styles["cnt"]}>
                                                    <p className={styles["desc"]} dangerouslySetInnerHTML={{ __html: replaceContent(con) }}></p>
                                                    {
                                                        imgs.length ? 
                                                        <div className={styles['imgs']}>
                                                            {
                                                                imgs.map((img, imgIdx) => <Image layout='fill' src={replaceImageUrl(img.url)} key={imgIdx} />)
                                                            }
                                                        </div> : ""
                                                    }
                                                    {
                                                        notice ?
                                                        <p className={styles["icon"]}>
                                                            <span className="iconfont icon-tongzhi"></span>
                                                            <span dangerouslySetInnerHTML={{ __html: replaceContent(notice) }}></span>
                                                        </p> : ""
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}